<div class="row-fluid">
<h2 class="pull-left" id="azuria">Classes</h2><br><br>
</div>
<!-- begin content -->
<div class="node format" id="classes">
			
	<p><!-- TWO-COLUMNS --></p>
<link href="<?php echo base_url('assets/css/ak-classes-node-02.css')?>" rel="stylesheet" type="text/css"><!--[if IE 8]><br />
<link href="http://s.aeriastatic.com/files/aurakingdom/document/a/ak-classes-ie-is-retaaaarded.css" rel="stylesheet" type="text/css">
<![endif]--><!--[if lt IE 8]></p>
<link href="http://s.aeriastatic.com/files/aurakingdom/document/a/ak-classes-ie-is-retaaaarded.css" rel="stylesheet" type="text/css">
<![endif]--></p>
<div class="node">&nbsp;</div>
<script type="text/javascript">
var statsNames = 'Único Alvo, Área de Efeito, Defesa, Evasão, Cura, Suporte';

var vidData = [
	['ACTIVE Guardião',
	'Nas mãos de um guardião, armadura e escudo são armas tanto quanto uma espada. Esses estrategistas revestidos de aço podem resistir ao mais poderoso dos golpes, mantendo os inimigos ocupados enquanto seus companheiros os destroem. ',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-p-guardian.jpg',
	'http://s.aeriastatic.com/files/aurakingdom/movie/g/guardian',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-char-m-guardian.jpg',
	[2, 2, 3, 1, 0, 2]],
	
	['ACTIVE Duelista',
	'Duelistas são os mais brilhantes quando lutam individualmente. Sua defesa está em sua evasão acrobática, e sua capacidade de tirar rapidamente danos altos o tornam uma força poderosa.',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-p-duelist.jpg',
	'http://s.aeriastatic.com/files/aurakingdom/movie/d/duelist',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-char-duelist.jpg',
	[3, 1, 1, 3, 1, 1]],
	
	['ACTIVE Ravager',
	'Ravager são conhecido por sua filosofia de "não faço prisioneiros". Eles usam grandes machados com arcos longos capazes de poderosos impactos , além disso muitos de seus ataques não prejudicam somente o alvo, mas todos ao redor.',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-p-ravager.jpg',
	'http://s.aeriastatic.com/files/aurakingdom/movie/r/ravager',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-char-ravager.jpg',
	[2, 3, 2, 1, 0, 1]],

	['ACTIVE Mago',
	'Em sintonia com as forças da natureza, os magos concentram seus poderes em seus bastões para invocar magias elementares, muitas vezes destruindo vários inimigos. Eles possuem uma ampla variedade de elementos que exploram os pontos fracos dos inimigos.',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-p-wizard.jpg',
	'http://s.aeriastatic.com/files/aurakingdom/movie/w/wizard',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-char-wizard.jpg',
	[2, 3, 1, 1, 2, 1]],
	
	['ACTIVE Feiticeiro',
	'Feiticeiros tiram suas magias sombrias de livros antigos e grimórios. Invocando o poder espectral dentro de cada página, eles conjuram feitiços malignos para levar o tomento a seus inimigos, deixando-os enfraquecidos e vulneráveis.',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-p-sorcerer.jpg',
	'http://s.aeriastatic.com/files/aurakingdom/movie/s/sorcerer',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-char-sorcerer.jpg',
	[2, 1, 1, 2, 2, 3]],
	
	['ACTIVE Bardo',
	'Longe de serem harpistas timídos, Bardos entram na batalha com tudo, fazendo mágica com sua música. Eles podem atacar com ondas sonoras potentes, mas na maioria das vezes tocam belas canções para curar ou reforçar seus aliados.',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-p-bard.jpg',
	'http://s.aeriastatic.com/files/aurakingdom/movie/b/bard',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-char-bard.jpg',
	[1, 1, 1, 1, 3, 2]],
	
	['ACTIVE Granadier',
	'Granadeiros são conhecidos por suas armas: canhões enormes que convertem energia mágica em mísseis e descargas plasmáticas. Não contente em simplesmente explodir os inimigos em pedaços, eles também constroem turrets e outros aparelhos para da apoio na batalha.',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-p-grenadier.jpg',
	'http://s.aeriastatic.com/files/aurakingdom/movie/g/grenadier',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-char-grenadier.jpg',
	[2, 3, 2, 1, 2, 1]],
	
	['ACTIVE Gunslinger',
	'Com uma pistola em cada mão, Gunslingers afugentam seus inimigos com chuvas de balas. Com seus tiros mágicos e armadilhas diabólicas, suas batalhas são como jogos de alto risco sempre matendo distância, sendo a vitória o resultado provável.',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-p-gunslinger.jpg',
	'http://s.aeriastatic.com/files/aurakingdom/movie/g/gunslinger',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-char-gunslinger.jpg',
	[2, 2, 1, 2, 0, 2]],
	
	['INACTIVE Female Guardian',
	'CHARACTER DESCRIPTION HERE',
	'VIDEO TAG POSTER FILE PATH HERE',
	'VIDEO FILE WITHOUT FILE EXTENSION',
	'http://s.aeriastatic.com/files/aurakingdom/image/a/ak-classes-131014-01-char-f-guardian.jpg',
	[0, 0, 0, 0, 0, 0]]
];

/*----------------------------------------------------------------------------------------------
      DON'T CHANGE ANYTHING BELOW THIS POINT!
----------------------------------------------------------------------------------------------*/

var statesArray = statsNames.split(', ');
var vidNum = 0;

var nodeTag = document.querySelector('.node');
for(i=0; i<vidData.length; i++){
	if(vidData[i][0].split(' ')[0] == 'INACTIVE'){
		nodeTag.innerHTML += '<div class="ak-class"></div>';
		
	}
	else{
		nodeTag.innerHTML += '<div class="ak-class"><p>' + vidData[i][0].split('ACTIVE ')[1] + '</p></div>';
	}
}

var overlayTag = document.querySelector('body');
var containerTag = document.querySelector('body');

function makeStuff(a,b,c){
	var createE = document.createElement(c);
	createE.id = b;
	a.appendChild(createE);
}

function giveClass(d,e){
	var classIt = document.getElementById(d);
	classIt.className = e;
}

makeStuff(overlayTag, 'overlay-tag', 'div');
makeStuff(containerTag, 'container-tag', 'div');

var overlayTagDiv = document.querySelector('#overlay-tag');
var insideConTag = document.querySelector('#container-tag');

makeStuff(insideConTag, 'close-btn', 'div');
makeStuff(insideConTag, 'left-arrow', 'div');
makeStuff(insideConTag, 'right-arrow', 'div');

giveClass('left-arrow', 'arrows');
giveClass('right-arrow', 'arrows');

var getDivs = document.querySelectorAll('.ak-class');

var getCloseBtn = document.querySelector('#close-btn');

var allActiveVids = [];
for(i=0; i<getDivs.length; i++){
	getDivs[i].style.backgroundImage = 'url("'+ vidData[i][4] +'")';

	var whichIsit = vidData[i][0].split(' ')[0];
	
	if(whichIsit == 'INACTIVE' || ((i + 1) == getDivs.length) && (whichIsit == 'INACTIVE')){
		getDivs[i].id = 'class-' + (i + 1);
		getDivs[i].className = 'ak-class char-inactive';
	}
		
	else if(whichIsit == 'ACTIVE'){
		getDivs[i].id = 'class-' + (i + 1);
		getDivs[i].className = 'ak-class';
	
		if(vidData[i][1].length > 300){
			alert('The description of "' + vidData[i][0] + '" is longer than 300 characters! Its currently at ' + vidData[i][1].length + ' characters!\n\nFIX IT DUDE!');
		}
	
		makeStuff(insideConTag, 'class-vid-' + (i+1), 'section');
	
		var getAll = document.querySelectorAll('#container-tag section');
	
		var getSection = document.querySelector('#class-vid-' + (i+1));
	
		var charName = vidData[i][0].split('ACTIVE ')[1];
	
		getSection.innerHTML = '<h1>'+ charName +'</h1><h2 id="stats-'+ i +'" class="all-stats"></h2><video id="v'+ (i + 1) +'" poster="'+ vidData[i][2] +'" autoplay="true" loop muted="true"></video><p>'+ vidData[i][1] +'</p>';
		
		for(g=0; g<statesArray.length; g++){
			document.getElementById('stats-' + i).innerHTML += '<span class="star-'+ vidData[i][5][g] +'">'+ statesArray[g] +'</span>';
		}
	
		var getVideos = document.querySelector('#class-vid-' + (i+1) + ' video');
	
		var makeSrc = document.createElement('source');
		if(getVideos.canPlayType('video/mp4')){
			makeSrc.src = vidData[i][3] + '.mp4';
			makeSrc.type = 'video/mp4';
			makeSrc.codecs = 'avc1.4D401E, mp4a.40.2';
		}
		else{
			makeSrc.src = vidData[i][3] + '.ogv';
			makeSrc.type = 'video/ogg';
			makeSrc.codecs = 'theora,vorbis';
		}
		getVideos.appendChild(makeSrc);
		allActiveVids.push(1+i);
	}
	
}

var findPosition;

function getPosition(){
	for(i=0; i<allActiveVids.length; i++){
		if(vidNum == allActiveVids[i]){
			findPosition = i;
		}
	}
}

var pauseVids = document.querySelectorAll('video');

function pauseAllVids(){
	for(i=0; i<pauseVids.length; i++){
		pauseVids[i].pause();
	}
}
pauseAllVids();

function resetAllVids(){
	for(i=0; i<pauseVids.length; i++){
		pauseVids[i].load();
	}
}

var getSources = document.querySelectorAll('source');

for(h=0; h<getDivs.length; h++){
	getDivs[h].addEventListener('click', function(){
		hide();
		
		if(this.className == 'ak-class char-inactive'){
			return this;
		}
		
		else{
			var thisDiv = this.id.substring(6);
		
			vidNum = thisDiv;
		
			var re = document.querySelectorAll('#v' + thisDiv + ' source');
		
			getPosition();
		
			overlayTagDiv.style.display = 'block';
			insideConTag.style.display = 'block';
		
			var getVidSpot = document.getElementById('class-vid-' + thisDiv);
			getVidSpot.style.display = 'block';
		
			var thisVid = document.getElementById('v' + thisDiv);
			pauseAllVids();
			thisVid.play();
		}
	});
}

function hideVidSrc(){
	for(f=0; f<getSources.length; f++){
		getSources[f].src = '';
	}
}

function hide(){
	for(j=0; j<getAll.length; j++){
		getAll[j].style.display = 'none';
	}
}

function closeL(q){
	q.addEventListener('click', function(){
		insideConTag.style.display = 'none';
		overlayTagDiv.style.display = 'none';
		hide();
		resetAllVids();
		pauseAllVids();
	});
}
closeL(overlayTagDiv);
closeL(getCloseBtn);

var lA = document.getElementById('left-arrow');
var rA = document.getElementById('right-arrow');

lA.addEventListener('click', function(){
	hide();
	if(findPosition == 0){	
		findPosition = allActiveVids.length;
	}
	getAll[findPosition - 1].style.display = 'block';
	pauseAllVids();
	document.getElementById('v' + allActiveVids[findPosition - 1]).play();
	findPosition--;
});

rA.addEventListener('click', function(){
	hide();
	if(findPosition == getAll.length - 1){
		findPosition = -1;
	}
	getAll[findPosition + 1].style.display = 'block';
	pauseAllVids();
	document.getElementById('v' + allActiveVids[findPosition + 1]).play();
	findPosition++;
});
</script>

<div id="dumb-ie">PLEASE UPGRADE YOUR BROWSER TO SEE THIS PAGE</div>
	
		
</div>
<!-- end content -->	